<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link
	href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- bootstrap table组件以及中文包的引用*@ -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script
	src="${pageContext.request.contextPath}/javascript/myjavascript/jQuery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script
	src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.min.js"></script>
<script
	src="${pageContext.request.contextPath}/javascript/table/bootstrap-table.js"></script>
<link
	href="${pageContext.request.contextPath}/javascript/table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${pageContext.request.contextPath}/javascript/table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/javascript/myjavascript/myjs.js">
	
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/javascript/My97DatePicker/WdatePicker.js">
	
</script>
<body onload="addBoth()">
	<!-- <h3>产品显示</h3> -->
	<nav class="navbar navbar-default">
	<div class="form-inline" style="font-size: 18px">
		<h4>查询产品</h4>
		产品名: <input class="form-control" type="text" id="product_name">
		供应商: <select class="form-control" id="providerID">
			<option value="0">请选择供应商</option>
		</select> 目录: <select class="form-control" id="categoryID">
			<option value="0">请选择目录</option>
		</select> <a class="btn btn-primary btn-sm" href="#"
			style='font-size: 14px; width: 80px' onclick="doSearch()">搜索产品</a> <a
			class="form-control" href="buy.action" style="margin-left: 92%;"><span
			class="glyphicon glyphicon-bed" aria-hidden="true"></span>我的购物车</a>
	</div>
	</nav>
	<table class="table" width="90%" id="mytable" style="font-size: 18px">
	</table>
	<!-- 产品修改模态框-->
	<!-- <button type="button" class="btn btn-primary btn-lg"
		data-toggle="modal" data-target="#myModal">Launch demo modal
	</button> -->

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改模态框</h4>
				</div>
				<div class="modal-body">
					<form id="myform">
						<input type="text" name="productID" id="productID"
							readonly="readonly" hidden />
						<table class="table table-striped">
							<tr>
								<td>产品名称</td>
								<td><input class="form-control" type="text"
									name="product_name" id="p_name"
									onblur="checkUpProductName(this,productID)"> <span
									id="check_name"></span></td>
							</tr>

							<tr>
								<td>产品进价</td>
								<td><input class="form-control" type="text"
									name="income_price" onblur="checkProductIncome_price(this)"
									id="p_income_price"> <span id="income_price"></span></td>
							</tr>

							<tr>
								<td>供应商</td>
								<td><select class="form-control" id="providerID2"
									name="pro">
								</select></td>
							</tr>

							<tr>
								<td>产品数量</td>
								<td><input class="form-control" type="text" name="quantity"
									onblur="checkProductQuantity(this)" id="p_quantity"> <span
									id="quantity"></span></td>
							</tr>

							<tr>
								<td>产品售价</td>
								<td><input class="form-control" type="text"
									name="sales_price" onblur="checkProductSales_price(this)"
									id="p_sales_price"> <span id="sales_price"></span></td>
							</tr>

							<tr>
								<td>目录:</td>
								<td><select class="form-control" id="categoryID2"
									name="cate">
								</select></td>
							</tr>

							<tr>
								<td>进货时间</td>

								<td><input class="form-control" id="p_income_time"
									type="text" name="income_time" class="Wdate"
									onclick="WdatePicker()" /></td>
							</tr>

							<tr>
								<td colspan="2"><input class="btn btn-info" type="reset"
									value="重置数据" /></td>
							</tr>
						</table>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" onclick="doEdit()">确定修改</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(function() {
		var t = new TableInit();
		t.Init();
	})
	var TableInit = function() {
		var oTableInit = new Object();
		oTableInit.Init = function() {
			//alert("----加载表格代码----");
			//以bootstrap的形式加载表格
			$('#mytable').bootstrapTable({
				url : 'SearchByPage.action', //请求后台的URL（*）
				method : 'get', //请求方式（*）
				striped : true, //是否显示行间隔色
				pagination : true, //是否显示分页（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				uniqueId : "ID", //每一行的唯一标识，一般为主键列
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 5, //每页的记录行数（*）
				pageList : [ 5, 10, 25, 50, 100 ], //可供选择的每页的行数（*）
				queryParams : oTableInit.queryParams,//传递参数（*）
				showColumns:true,//显示所有列
				showRefresh:true,//刷新按钮
				clickToSelect:true,//是否启用点击选中行
				columns : [ {
					checkbox : true
				}, {
					field : 'productID',
					title : '产品ID'
				}, {
					field : 'product_name',
					title : '产品名称'
				}, {
					field : 'income_price',
					title : '产品进价(元)'
				}, {
					field : 'pro.provider_name',
					title : '供应商'
				}, {
					field : 'quantity',
					title : '产品数量'
				}, {
					field : 'sales_price',
					title : '产品售价(元)'
				}, {
					field : 'cate.category_name',
					title : '产品目录'
				}, {
					field : 'income_time',
					title : '进货时间'
				}, {
					field : 'productID',
					title : '操作',
					formatter : actionFormatter
				} ]

			});
		}
		//--------加载表格的参数----------
		oTableInit.queryParams = function(params) {
			var temp = {
				limit : params.limit,
				offset : params.offset,
				'product_name' : $("#product_name").val(),
				'providerID' : $("#providerID").val(),
				'categoryID' : $("#categoryID").val(),
			}
			return temp;
		}
		return oTableInit;
	}

	function actionFormatter(value, row, index) {

		return "<a class='btn btn-danger' href='#' onclick='del("
				+ value
				+ ")'>删除产品</a>"
				+ "&nbsp;&nbsp;"
				+ "<a class='btn btn-success' data-toggle='modal' data-target='#myModal' href='#' onclick='edit("
				+ value + ")'>修改产品</a>" + "&nbsp;&nbsp;"
				+ "<a class='btn btn-primary'  onclick='addToCart(" + value
				+ "," + row.sales_price + ")'>添加至购物车</a>";
		;

	}
	function addToCart(id, sales_price) {
		//alert(sales_price);
		$.ajax({
			type : "get",
			url : "MyCart.action",
			data : {
				"goods_id" : id,
			//"sales_price":sales_price
			},
			success : function(msg) {
				alert("添加成功");
				//$('#mytable').bootstrapTable('refresh');
			}
		})
	}
	function del(id) {
		var f = confirm("确定要删除改产品吗?");
		if (f) {
			$.ajax({
				type : "get",
				url : "deleteProduct.action",
				data : {
					"id" : id
				},
				success : function(msg) {
					alert(msg);
					$('#mytable').bootstrapTable('refresh');
				}
			})
		}

	}
	function edit(id) {
		$.ajax({
			type : "get",
			url : "readyEdit.action",
			data : {
				"pid" : id
			},
			dataType : "json",
			error : function() {
				alert('获取数据失败！');
			},
			success : function(list) {
				//var list = jsonArr[0];
				$("#productID").val(list.productID);
				$("#p_name").val(list.product_name);
				$("#p_income_price").val(list.income_price);
				$("#p_quantity").val(list.quantity);
				$("#p_sales_price").val(list.sales_price);
				$("#p_income_time").val(list.income_time);
				$("#providerID2 ").val(list.pro.providerID); // 设置Select的Value值为4的项选中
				$("#categoryID2 ").val(list.cate.categoryID); // 设置Select的Value值为4的项选中
			}

		})

	}
	function doEdit() {
		alert(editProductReg() + "---");
		if (editProductReg() == true) {
			$.ajax({
				type : "get",
				url : "doEdit.action",
				data : $("#myform").serialize(),
				success : function(msg) {
					$("#myModal").modal('hide');
					$('#mytable').bootstrapTable('refresh');

				}
			})
		} else {
			alert("请重新修改");
		}

	}
	function doSearch() {
		$('#mytable').bootstrapTable('refresh', {
			//要带新参数过去
			query : {
				"offset" : '0',
				'limit' : '5',
				'product_name' : $("#product_name").val(),
				'providerID' : $("#providerID").val(),
				'categoryID' : $("#categoryID").val(),
			}
		})

	}
	function addBoth() {
		$.ajax({
			type : "get",
			url : "getBoth.action",
			dataType : "json",
			error : function() {
				alert('获取数据失败！');
			},
			success : function(jsonArr) {
				//alert(jsonArr[0])
				var list1 = jsonArr[0];
				var pro = document.getElementById("providerID");
				var pro2 = document.getElementById("providerID2");
				for (var i = 0; i < list1.length; i++) {
					pro.add(new Option(list1[i].provider_name,
							list1[i].providerID));
					pro2.add(new Option(list1[i].provider_name,
							list1[i].providerID));
				}
				var list2 = jsonArr[1];
				var cate = document.getElementById("categoryID");
				var cate2 = document.getElementById("categoryID2");
				for (var i = 0; i < list2.length; i++) {
					cate.add(new Option(list2[i].category_name,
							list2[i].categoryID));
					cate2.add(new Option(list2[i].category_name,
							list2[i].categoryID));
				}
				//alert("Data Saved: " + msg);
			}
		});

	}
</script>

</html>